<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background: red;
				animation: move 1s linear forwards paused;
				--delay: 0;
				animation-delay: var(--delay);
				clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
			}
			@keyframes move {
				to {
					transform: translateX(200px);
					background-color: #ccc;
				}
			}
		</style>
	</head>
	<body>
		<h3>通过将动画延迟执行时间设置为复数</h3>

		<input type="range" value="0" min="0" max="1" step="0.01" oninput="aaa(event)" />
		<div></div>
	</body>
</html>
<script>
	let div = document.querySelector('div')
	function aaa(event) {
		div.style.setProperty('--delay', event.target.value * -1 + 's' )
	}
</script>
